import React from 'react';
import { TabBar } from 'antd-mobile';
import _ from 'lodash';
import { Text, Image, View, TouchableOpacity } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Feather';
import styles from './styles';
import Item from './item';
import CenterBtn from './centerBtn';

const TI = Icon.TabBarItem;
const TabBarItem = TabBar.Item;

const isSelected = (scene, key) => key === scene;

const Items = ({ data, currentScene }) =>
  _.map(data, d => <Item key={d.rowKey} {...d} currentScene={currentScene} />);

export default props => {
  const currentScene = Actions.currentScene;
  const DEF_DATA = [
    {
      rowKey: 'home',
      iconName: 'check-square',
      onPress: () => {
        if (currentScene !== 'home') {
          Actions.overview();
        }
      },
      title: '首页'
    },
    {
      rowKey: 'customerList',
      iconName: 'list',
      onPress: () => {
        if (currentScene !== 'customerList') {
          Actions.customer();
        }
      },
      title: '客户'
    },
    {
      rowKey: 'centerBtn',
      customItem: <CenterBtn />
    },
    {
      rowKey: 'activityList',
      iconName: 'flag',
      onPress: () => {
        if (currentScene !== 'activityList') {
          Actions.activity();
        }
      },
      title: '活动'
    },
    {
      rowKey: 'personalOverview',
      iconName: 'user',
      onPress: () => {
        if (currentScene !== 'personalOverview') {
          Actions.personal();
        }
      },
      title: '我的'
    }
  ];
  const { data = DEF_DATA } = props;
  return (
    <View style={styles.wrapBox}>
      <Items data={data} currentScene={currentScene} />
    </View>
  );
};
